<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示Vue的插值语法</title>
    <!--导入vue的js文件-->
    <script src="./js/vue@3.5.12.global.js"></script>
</head>
<body>
<!--视图-->
    <div id="app">
        <p>{{name}}</p>
        <p>他的名字:{{name}}</p>
        <p>{{'他的名字:'+name}}</p>
        <p>{{age+10}}</p>
        <p>{{flag}}</p>
    </div>
</body>
<script>
    //创建实例
    const app = Vue.createApp({
        //模型：定义数据的地方
        //只有在model中定义的数据才能在视图中使用
        data() {
            return {
                name: 'tony',
                age: 30,
                gender: '男',
                flag: true,//布尔值
            }
        }
    })
    //挂载
    app.mount('#app')
</script>
</html>